// 置顶
var toTop = document.querySelector('.toTop')
toTop.onclick = function () {
    window.scrollTo(0, 0)
}
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop
    if (scrollTop > 500) {
        toTop.style.display = 'block'
    } else {
        toTop.style.display = 'none'
    }
}
// 置顶
var toTop = document.querySelector('.toTop')
toTop.onclick = function () {
    window.scrollTo(0, 0)
}
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop
    if (scrollTop > 500) {
        toTop.style.display = 'block'
    } else {
        toTop.style.display = 'none'
    }
}

// 轮播
var swiper = document.querySelector('.swiper')
var swiperImgs = document.querySelectorAll('.swiperImgs')
var swiper_img = document.querySelector('.swiper_img')
var bg = document.querySelectorAll('.bg')
var left = document.querySelector('.left')
var rig = document.querySelector('.right')
var swiper_chose = document.querySelector('.swiper_chose')
var a = 0;
var b = 0;

// 轮播选项
var rect = document.createElement('span')
for (var i = 0; i < swiperImgs.length - 1; i++) {
    var rect_span = rect.cloneNode(rect)
    swiper_chose.appendChild(rect_span);
}
var spans = document.querySelectorAll('.swiper_chose span');

spans[0].style.background = '#fff'
function span_change() {
    for (var i = 0; i < spans.length; i++) {
        spans[i].style.background = ''
    }
    spans[b].style.background = '#fff'
}

for (var i = 0; i < spans.length; i++) {
    spans[i].setAttribute('data-index', i)
    spans[i].onclick = function () {
        var index = this.getAttribute('data-index')
        b = index;
        a = b * document.body.clientWidth;
        swiper_img.style.right = a + 'px';
        span_change()
    }
}
function swiper_move() {
    if (b < swiperImgs.length - 1) {
        a = b * document.body.clientWidth;
        swiper_img.style.right = a + 'px';
        span_change()
        b++;
    } else if (b == 3) {
        b = 0
        a = 0
        swiper_img.style.right = a + 'px';
        span_change()
    }
}
// 点击向左移动
function swiper_move_left() {
    if (b > 0) {
        b--;
        a = document.body.clientWidth * b;
        swiper_img.style.right = a + 'px';
        span_change()
    } else {
        b = 2
        a = document.body.clientWidth * b;
        swiper_img.style.right = a + 'px';
        span_change()
    }
}
// 左右按钮
left.onmouseenter = function () {
    left.style.opacity = '.5'
}
left.onmouseleave = function () {
    left.style.opacity = '0'
}
rig.onmouseenter = function () {
    rig.style.opacity = '.5'
}
rig.onmouseleave = function () {
    rig.style.opacity = '0'
}

left.onclick = function () {
    swiper_move_left()
}
rig.onclick = function () {
    swiper_move()
}
setInterval(swiper_move, 4000)
// 进入页面先加载
swiper_img.style.width = swiperImgs.length * document.body.clientWidth + 'px'
for (var i = 0; i < swiperImgs.length; i++) {
    bg[i].style = 'background-image:url(' + bg[i].previousElementSibling.src + ')';
    swiperImgs[i].style.width = document.body.clientWidth + 'px';
}
// 页面改变大小更改轮播大小
window.onresize = function () {
    swiper_img.style.width = swiperImgs.length * document.body.clientWidth + 'px'
    for (var i = 0; i < swiperImgs.length; i++) {
        swiperImgs[i].style.width = document.body.clientWidth + 'px';
    }
}